<template>
    <div class="">
        <van-nav-bar title="地址列表" left-arrow @click-left="onClickLeft" />
        <van-address-list v-model="chosenAddressId" :list="list" :disabled-list="disabledList"
            disabled-text="以下地址超出配送范围" default-tag-text="默认" @add="onAdd" @edit="onEdit" @select="onSelect">
            <template #default>
                <van-button type="danger" @click="currentaddress(list[indexAddress].address)">确定</van-button>
            </template>
        </van-address-list>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Toast } from 'vant';
import { useRouter } from 'vue-router'
import { useAddressStore } from '@/stores/address'

const chosenAddressId = ref()
const router = useRouter()
// const route =useRoute()
const indexAddress = ref(0)

// 路由传参获取当前勾选的地址
// const currentAddress = route.query
const currentaddress = (address: string) => {
    router.push({ path: '/cart', query: { address } })
}
const addressStore = useAddressStore()
const list = ref([
    {
        id: 0,
        name: '',
        tel: '',
        address: '',
        isDefault: false,
    },
])
// 显示保存的地址
onMounted(() => {
    const listTemp = addressStore.addresslist.map(item => {
        return { id: Math.random() * 10, name: item.name, tel: item.tel, address: item.addressDetail, isDefault: item.isDefault }
    })
    list.value = listTemp



})
const disabledList = [
    {
        id: '3',
        name: '王五',
        tel: '1320000000',
        address: '浙江省杭州市滨江区江南大道 15 号',
    },
]

// 返回上一级
const onClickLeft = () => {
    router.push('/cart')
}
// 跳转新增地址页面
const onAdd = () => {
    router.push('/address')
}
const onEdit = (item, index) => Toast('编辑地址:' + index);

const onSelect = (item:any,index:number)=>{
    indexAddress.value = index
    
    console.log('item  ',item, ' index ',indexAddress);
    
}

</script>

<style scoped>
:deep(.van-address-list__bottom) {
    padding-left: 0;
    padding-right: 0;
}

:deep(.van-nav-bar__content) {
    background-color: rgb(236, 13, 13);
}

:deep(.van-nav-bar__title) {
    font-weight: 900;
    color: #fff;
}

:deep(.van-nav-bar .van-icon) {
    color: white;
}
</style>
